<template>
  <div>
    <!-- header部分 -->
    <nav-title title="我的申请" routerLink="index"/>
    <div class="search">
      <input class="search-input" type="text" placeholder="请输入搜索关键字" v-model="searchText2">
      <img class="search-img" src="./images/search.png" alt="" @click="getApplicationListInfo">
    </div>
    <ul>
      <li v-for="(doneItem,index) in applicationList">
        <div class="neirong" @click="goToCheck(doneItem.cWfType,doneItem.cTransactionNbr)">
          <div class="yuan0" v-if=" index%4 == 0 "></div>
          <div class="yuan1" v-if=" index%4 == 1 "></div>
          <div class="yuan2" v-if=" index%4 == 2 "></div>
          <div class="yuan3" v-if=" index%4 == 3 "></div>
          <div class="con content clearfix">{{doneItem.text254}}</div>
          <div class="operation">
            <!-- 根据cwfstatus来判断，A:已批准  B:已驳回  C:已撤单  D；已拒绝  P:审批中 S: 已保存 -->
            <img v-if="doneItem.cWfStatus == 'A'" class="process-img" src="./images/process/01.png" alt="">
            <img v-if="doneItem.cWfStatus == 'B'" class="process-img" src="./images/process/02.png" alt="">
            <img v-if="doneItem.cWfStatus == 'C'" class="process-img" src="./images/process/03.png" alt="">
            <img v-if="doneItem.cWfStatus == 'D'" class="process-img" src="./images/process/04.png" alt="">
            <img v-if="doneItem.cWfStatus == 'P'" class="process-img" src="./images/process/05.png" alt="">
            <img v-if="doneItem.cWfStatus == 'S'" class="process-img" src="./images/process/06.png" alt="">
          </div>
          <div class="clearfix timer">
            <div class="con time fl" style="height: 25px;">{{doneItem.createdttm|dateFormat2}}</div>
            <a v-if="doneItem.cWfStatus == 'B' || doneItem.cWfStatus == 'P' || doneItem.cWfStatus == 'S'"
               class="cancelOrder"
               @click.stop="cancel(doneItem.cWfType,doneItem.cTransactionNbr)">撤单</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import vHeader from "../../components/header";
import { getMyApplication } from "../../api/api";
import { cancelOrder } from "../../api/api";
import { json2Form } from "../../util/http";

export default {
  components: {
    vHeader
  },
  mounted() {
    //我的申请列表
    this.getApplicationListInfo();
  },
  data() {
    return {
      searchText2: "", //搜索我的申请
      applicationList: [] //我的申请
    };
  },
  methods: {
    getApplicationListInfo() {
      let params = {
        queryKey: this.searchText2
      };
      getMyApplication(params)
        .then(res => {
          if (res && res.retCode === "000000") {
            this.applicationList = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    goToCheck(cwfType, cTransactionNbr) {
      //当流程类型判断
      if (cwfType == "DMC") {
        this.$router.push({
          name: "Compensate",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "HIR") {
        this.$router.push({
          name: "Employment",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "LOF") {
        this.$router.push({
          name: "Dissolution",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "PRC") {
        this.$router.push({
          name: "Formal",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "TER") {
        this.$router.push({
          name: "WastageShow",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "TOL") {
        this.$router.push({
          name: "Handover",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "CER") {
        this.$router.push({
          name: "proveModify",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "XFR") {
        this.$router.push({
          name: "Mobilization",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "MOD") {
        this.$router.push({
          name: "InfoModify",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "DRFT") {
        this.$router.push({
          name: "Employment",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "LAVE") {
        this.$router.push({
          name: "Vacation",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "SEL") {
        this.$router.push({
          name: "Unvacation",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "PAY") {
        this.$router.push({
          name: "SalaryPayment",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "PHF") {
        this.$router.push({
          name: "ProvidentFund",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "ASA") {
        this.$router.push({
          name: "PayRaiseApproval",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "OUT") {
        this.$router.push({
          name: "GoOut",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "OVRT") {
        this.$router.push({
          name: "OverTime",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "CRD") {
        this.$router.push({
          name: "SupplementaryCardDetail",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2"
          }
        });
      } else if (cwfType == "APEL") {
        this.$router.push({
          name: "PerformanceAppeal",
          query: {
            cTransactionNbr: cTransactionNbr,
            approved: "2",
          }
        });
      }
    },
    cancel(cWfType, cTransactionNbr) {
      let params = {
        c_WF_TYPE: cWfType,
        c_TRANSACTION_NBR: cTransactionNbr,
        c_ACTION_TYPE: "Cancel"
      };
      cancelOrder(json2Form(params))
        .then(res => {
          if (res && res.retCode == "000000") {
            this.$vux.alert.show({
              title: "提示",
              content: "撤单成功",
              onHide() {
                window.location.reload();
              }
            });
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.search {
  position: relative;
  .search-input {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 90%;
    margin: 8px 0;
    padding-left: 5px;
    text-align: left;
    border-radius: 3px;
    border: 2px solid #f5f5f5 !important;
  }
  .search-img {
    position: absolute;
    top: 11px;
    right: 5%;
    margin-right: 10px;
  }
}

ul li:first-child {
  margin-top: -26px;
}
ul {
  margin-top: 20px;
  margin-left: 10px;
  padding-bottom: 20px;
  clear: both;
  height: auto;
  overflow: hidden;
  background: url(../userInfo/image/rongyu_bg.jpg) 15px 50px repeat-y;
  .timer {
    margin-top: 22px;
    .time {
      font-size: 13px;
      color: #9b9b9b;
    }
  }
  li {
    clear: both;
    height: 100%;
    clear: both;
    padding-top: 22px;
    cursor: default;
    .neirong {
      position: relative;
      .operation {
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -5px;
        .process-img {
          width: 60px;
          height: 54px;
        }
      }
    }
  }
  .con {
    text-align: left;
    margin-left: 24px;
    line-height: 25px;
  }
  .cancelOrder {
    color: #1caafe;
    text-decoration: underline;
    margin-right: 30px;
  }
  .content {
    width: 80%;
    color: #333;
    font-size: 14px;
    font-weight: 700;
  }
  .yuan0 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #07bc4b;
  }
  .yuan1 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #16a8e7;
  }
  .yuan2 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6633;
  }
  .yuan3 {
    margin: 4px 0 0 9px;
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffff00;
  }
}
</style>
